<!-- 我的预约 -->
<template>
	<view>
		<view class="navbar">
			<view 
				v-for="(item, index) in navList" :key="index" 
				class="nav-item" 
				:class="{current: tabCurrentIndex === index}"
				@click="tabClick(index)"
			>
				{{item.text}}
			</view>
		</view>
		<view v-if="orderList.length === 0" class="order-con">
			<image src="../../static/images/no_order.png" mode="aspectFit"></image>
			<view class="empty-tips">亲，您还没有订单哦</view>
		</view>
		<view class="appointments" v-else>
			<scroll-view scroll-y="true" show-scrollbar="true" scroll-top="0">
				<view class="appo-item" v-for="(item,index) in orderList" :key="index">
					<view class="item-top">
						<view class="item-top-left">
							<image :src="item.technicianAvatar" class="avatar" mode="aspectFill"></image>
							<view class="_flex_column  technician_name">
								<text class="technicianName">{{item.technicianName}}</text>
								<view class="technicianNum-box">
									<text class="technicianNum">{{item.technicianType}}</text>
								</view>
							</view>
						</view>
						<view class="item-top-right">{{ item.shopName}}</view>
					</view>
					<view class="item-down">
						<view class="item-top-left">
							<view class="" v-if="item.content1 != null">预约时限：{{item.content1}}</view>
							<view class="" v-if="item.content1 == null">预约时限：超过预约时间前一个小时，不可取消订单</view>
							<view class=""> 预约项目：{{item.productName}} </view>
							<view class=""> 预约时间：{{item.bookTime.replace('T', ' ')}} </view>
						</view>
						<view class="item-top-right item-down-right" v-if="item.status == 'UNPAID'" @tap="showPay(item.id,item.productName,item.newPrice,item.productId,item.shopId)">继续支付</view>
						<view class="item-top-right item-down-right margin-left cancel-order" v-if="item.status == 'NOT_SERVED' || item.status == 'UNPAID'" @tap="cancelOrder(item.id)">取消预约</view>
					</view>
				</view>
				<uni-load-more :status="loadingType"></uni-load-more>
			</scroll-view>
			<!-- 没有数据展示图片
			<view v-else></view> -->
		</view>
		<view class="cu-modal" :class="modalShow?'show':''">
			<view class="cu-dialog pay-con" @tap.stop="">
				<view class="cu-bar bg-white">
					<view class="top">
						<view class="date"> 预约支付 </view>
						<image class="close" src="../../static/images/close.png" @tap="hideModal"></image>
					</view>
					<view class="time">{{productName}}</view>
				</view>
				<view class="payment">
					<view class="title">
						支付金额
					</view>
					<view class="money">
						￥{{productPrice}}
					</view>
				</view>
				<view class="title1">
					选择预约服务
				</view>
				<radio-group class="block" @change="RadioChange">
					<view class="cu-list menu text-left">
						<view class="cu-item" @click="changePayType('wxpay')">
							<label class="flex justify-between align-center flex-sub">
								<view class="flex-sub">微信支付</view>
								<radio class="round" :checked='payType == "wxpay"'></radio>
							</label>
						</view>
						<view class="cu-item" @click="changePayType('card')">
							<label class="flex justify-between align-center flex-sub">
								<view class="flex-sub">会员卡支付</view>
								<radio class="round" :checked='payType == "card"'></radio>
							</label>
						</view>
					</view>
				</radio-group>
				<view class="card" v-if='payType == "card"'>
					<view class="no-list" v-if='productCardList == null'>
						<image class="technician-avatar1" src="../../static/images/no_order.png"></image>
						<text>暂无会员卡~</text>
					</view>
					<view class="card2"  :key="index" v-else>
						<view class="top">
							<view class="text">
								体验卡
							</view>
							<image src="../../static/images/vip1.png" mode="aspectFill"></image>
						</view>
						<view class="middle">
							{{productCardList.name}}<text>/1节</text>
						</view>
						<view class="bottom">
							<view class="text1">
								瑜伽生活馆01馆
							</view>
							<view class="time">
							{{productCardList.expireDate}} 过期
							</view>
						</view>
					</view>
				</view>
				<view class="next" @tap="toPay()">
					<button class="next3">确认支付</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {orderList,cancelOrder,accomplishOrder,getCard,toPay,vipCardPay} from '@/api/index.js';
	import config from '@/config/index';
	import uniLoadMore from '@/components/uni-load-more/uni-load-more.vue';
	var _self,
	pageSize = 10,
	currentPage =1;// 定义全局参数,控制数据加载
	export default {
		components: {
			uniLoadMore
		},
		data() {
			return {
				tabCurrentIndex: 0,
				orderState: 1,
				orderList:[],
				modalShow:false,
				payType: 'wxpay',
				orderId:null,//订单id
				productName:null,
				productPrice:null,
				productId:null,
				shopId:null,
				productCardList:[],
				purchaseRecordId:null,
				cardId:null,
				loadingType: 'more', //加载更多状态
				navList: [{
						state: null,
						text: '未完成',
						loadingType: 'more',
					},
					{
						state: 0,
						text: '已完成',
						loadingType: 'more',
					},{
						state: 1,
						text: '已取消',
						loadingType: 'more',
					}
				],
			};
		},
		onLoad() {
			_self = this;
			currentPage=1;
			this.orderList=[];
			_self.getOrderList(_self.orderState)
		},
		onShow() {
			_self = this;
			currentPage=1;
			this.orderList=[];
			_self.getOrderList(_self.orderState)
		},
		onPullDownRefresh: function() {
		 	this.getOrderList(this.orderState);//下拉刷新的时候请求一次数据
		},
		onReachBottom: function() {
			console.log(_self.loadingType);
		 	if(_self.loadingType == 2){
		 		return false
		 	}
		 	currentPage++;
		 	this.getOrderList(this.orderState);
		},
		methods: {
			showPay(id,name,price,productId,shopId){
				let _that = this
				_that.orderId = id
				_that.productName = name
				_that.productPrice = price
				_that.modalShow = true
				_that.productId = productId
				_that.shopId = shopId
				_that.getProductCardList()
				
			},
			//选择支付方式
			changePayType(type) {
				this.payType = type;
				if(type=="card"){
					this.cardShow == false
				}else{
					this.cardShow == true
				}
			},
			//支付查询用户下是否有会员卡
			getProductCardList(){
				let _that = this
				getCard(_that.productId,_that.shopId).then(re =>{
					_that.productCardList = re
					_that.purchaseRecordId = re.purchaseRecordId
					_that.cardId = re.cardId
				}).catch(re=>{
					console.log(re);
				});
			},
			toPay(){
				if(this.payType == 'wxpay'){
					this.wxPay()
				}else{
					this.vipCardPay()
				}
			},
			//微信支付
			wxPay(){
				let _that = this
				toPay(_that.orderId,2).then(re =>{
					uni.requestPayment({
						provider: 'wxpay',
						// appId: re.appid,
						timeStamp: re.timeStamp,
						nonceStr: re.nonceStr,
						package: re.package,
						signType: 'MD5',
						paySign: re.paySign,
						success: function (res) {
							console.log('success:' + JSON.stringify(res));
							// this.$api.msg('支付成功');
							// uni.navigateTo({
							// 	url: 'submit_review'
							// });
							_that.modalShow = false
						},
						fail: function (err) {
							console.log('fail:' + JSON.stringify(err));
						}
					});
				}).catch(re=>{
					console.log(re);
				});
			},
			//会员卡支付
			vipCardPay(){
				let _that = this
				if(_that.purchaseRecordId == null || _that.purchaseRecordId == '' || _that.purchaseRecordId == undefined){
					this.$api.msg('没有会员卡可支付');
					return false
				}
				vipCardPay(_that.orderId,_that.purchaseRecordId).then(re =>{
					// uni.navigateTo({
					// 	url: 'submit_review'
					// });
					_that.modalShow = false
				}).catch(re=>{
					console.log(re);
				});
			},
			RadioChange(e) {
				this.radio = e.detail.value
			},
			hideModal(e) {
				this.modalShow = false
			},
			//完成订单
			accomplishOrder(id){
				let _that = this
				accomplishOrder(1,id).then(re =>{
					currentPage=1;
					this.orderList=[];
					_self.getOrderList(_self.orderState)
					setTimeout(this.$api.msg('订单已完成'),2000)
				}).catch(re=>{
					console.log(re);
				});
			},
			//取消订单
			cancelOrder(id){
				let _that = this
				uni.showModal({
					title: '提示',
					content: '确定取消预约？',
					cancelText: '取消',
					confirmText: '确定',
					success: res => {
						if (res.confirm) {
							cancelOrder(1,id).then(re =>{
								currentPage=1;
								this.orderList=[];
								_self.getOrderList(_self.orderState)
								setTimeout(this.$api.msg('取消预约成功'),2000)
							}).catch(re=>{
								console.log(re);
							});
						}
					}
				})
			},
			//顶部tab点击
			tabClick(index){
				_self.orderList=[];
				currentPage=1;
				this.tabCurrentIndex = index;
				console.log(index)
				if(index == 0){
					this.orderState = 1
				}else if(index == 1){
					this.orderState = 2
				}else if(index == 2){
					this.orderState = 3
				}else{
					return
				}
				_self.getOrderList(this.orderState)
			},
			getOrderList(orderState){
				let _that = this
				uni.showLoading({
					title: '加载中',
					mask:true
				})
				orderList(1,currentPage,pageSize,this.orderState).then(re =>{
					uni.hideLoading();
					if(re.length <= pageSize){
						uni.hideLoading();
						this.loadingType = 'nomore';
					}else{
						this.loadingType = 'more'
					}
					if (re== '') {//没有数据
						_self.loadingType = 'nomore';
						uni.hideNavigationBarLoading();//关闭加载动画
						return;
					}
					if(currentPage==1){
						_self.orderList =re;
					}else{
						_self.orderList = _self.orderList.concat(re);//将数据拼接在一起
					}
					uni.hideLoading();
					uni.hideNavigationBarLoading();
					uni.stopPullDownRefresh();//得到数据后停止下拉刷新
				}).catch(re=>{
					console.log(re);
				});
			},
			//swiper 切换
			changeTab(e){
				_self.orderList=[];
				currentPage=1;
				this.tabCurrentIndex = e.target.current;
				this.orderState = e.target.current +1
				this.getOrderList(this.orderState);
			},
		}
	}
</script>

<style lang="scss">
	@import "../../static/css/my_appointment.css";
	.no-list{
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.no-list image{
		height: 200rpx;
		width:200rpx;
	}
	.navbar{
		display: flex;
		height: 40px;
		padding: 0px 5px 8rpx;
		background: #fff;
		box-shadow: 0 1px 5px rgba(0,0,0,.06);
		position: fixed;
		width:100%;
		z-index: 10;
		.nav-item{
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 28upx;
			font-weight: normal;
			color: #333;
			position: relative;
			&.current{
				color: #FF203B;
				&:after{
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 14px;
					height: 0;
					border-bottom: 5px solid #FF203B;
					border-radius: 400rpx;
				}
			}
		}
	}
	.order-con{
		text-align: center;
	}
	.order-con image{
		margin-top:200rpx;
		width:300rpx;
		height:300rpx;
	}
	.empty-tips{
		color: #999;
		margin-top:-30rpx;
	}
	.appo-item:first-child{
		margin-top:80rpx;
	}
	.appo-item {
		width: 100%;
		background: #fff;
		// background: url('http://down.tljnn.com/2020/04/14/11/22/59/4dc27bfc-8913-438e-86d7-d42477a637f220200414112200059_appointmentitem.jpg');
		// background-size: 100% 100%;
		box-sizing: border-box;
		padding: 24rpx;
		margin-bottom: 20rpx;
		border-radius: 20rpx;
		color: rgba(255, 255, 255, 1);
		font-size: 20rpx;
		border:1px solid #efefef;
		.item-top,
		.item-down {
			display: flex;
			justify-content: space-between;

			.item-top-left {
				display: flex;
				align-items: center;
				color: #585858;
				font-size: 24rpx;
				view:not(:first-child){
					margin-top:8rpx;
				}
			}

			.avatar {
				margin-right: 14rpx;
			}
		}

		.item-down {
			margin-top: 24rpx;
			align-items: flex-end;

			.item-top-left {
				flex-direction: column;
				align-items: flex-start;
			}

		}

	}
	//对话框
	.next .next3{
		background: url("../../static/images/band-card.png") no-repeat;
		background-size: 100% 100%;
		color: #fff;	
		width:600rpx;
		height:80rpx;
		margin:46rpx auto;
		line-height: 80rpx;
		text-align: center;
		font-size: 28rpx;
	}
	.cu-modal{
		text-align: left;
	}
	.cu-dialog{
		height:1012rpx;
		background: #fff;
	}
	.cu-bar{
		display: flex;
		flex-direction: column;
		border-bottom: 1px solid #EEEEEE
	}
	.cu-bar .close{
		width:50rpx;
		height:50rpx;
		margin-right:24rpx ;
	}
	.cu-bar .top{
		display: flex;
		flex-direction: row;
		color: #BFBFBF;
		font-size: 24rpx;
		margin-top:24rpx;
		width:100%;
	}
	.date{
		display: flex;
		flex: 1;
		justify-content: center;
		margin-right: -74rpx;
	}
	.cu-bar .time{
		font-size: 28rpx;
		color: #3E3E3E;
		text-align: center;
		margin-bottom: 20rpx;
	}
	.service-con{
		background: #fff;
	}
	.cu-dialog .title{
		color: #BFBFBF;
		font-size: 24rpx;
		padding:28rpx 0 0 28rpx;
		text-align: left;
	}
	.cu-dialog .title1{
		color: #BFBFBF;
		font-size: 24rpx;
		padding:0rpx 0 0 28rpx;
		text-align: left;
	}
	.cu-btn{
		height:60rpx;
		width:180rpx;
		border-radius: 30rpx;
	}
	.red{
		background: url("../../static/images/band-card.png") no-repeat;
		background-size: 100% 100%;
		color: #fff;
	}
	//支付窗口
	.pay-con{
		width:100%!important;
		vertical-align:bottom;
		border-radius: 0;
	}
	.card{
		margin:36rpx;
	}
	.card2{
		-webkit-transform:scale(1)!important;
		transform:scale(1)!important;
		left:-60rpx!important;
		padding:0;
		width:100%;
		height: 380rpx;
		background: url("../../static/images/vip.png");
		background-size: cover;
		margin-right: 28rpx;
		border-radius: 26rpx;
	}
	.card .top image{
		width:82rpx;
		height:40rpx;
		margin:32rpx;
	}
	.card .top{
		color: #B59C78;
		font-size: 28rpx;
		display: flex;
		flex-direction: row;
	}
	.card .top .text{
		flex: 1;
		padding:32rpx 46rpx 32rpx 46rpx;
	}
	.middle{
		text-align: center;
		font-size: 60rpx;
		color: #B59C78;
	}
	.middle text{
		font-size: 40rpx;
	}
	.bottom{
		display: flex;
		flex-direction: row;
	}
	.bottom .text{
		color: #776852;
		font-size: 28rpx;
		margin:88rpx 0 50rpx 50rpx;
		flex: 1;
	}
	.bottom .buy{
		color: #E1CEAD;
		font-size: 28rpx;
		margin:66rpx 32rpx 36rpx 0rpx;
		background: #0B0404;
		width:176rpx;
		height:76rpx;
		border-radius: 400rpx;
		text-align: center;
		line-height: 76rpx;
	}
	.details{
		display: flex;
		flex-direction: row;
		height: 100rpx;
		background: #fff;
		padding:0 36rpx;
		line-height: 100rpx;
	}
	.details .text{
		flex: 1;
	}
	.can-buy{
		background: #fff;
	}
	.can-buy .title{
		color: #424242;
		font-size: 28rpx;
		font-weight: 700;
		padding:24rpx 0 24rpx 36rpx;
		margin-top:16rpx;
	}
	.text1{
		color: #DAB273;
		font-size: 24rpx;
		margin:116rpx 0rpx 50rpx 50rpx;
		flex: 1;
	}
	.card .time{
		color: #DAB273;
		font-size: 24rpx;
		margin:116rpx 50rpx 50rpx 0;
	}
	.payment{
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.payment .title{
		padding:40rpx 24rpx;
		font-size: 28rpx;
		color: #3E3E3E;
		flex: 1;
	}
	.payment .money{
		padding:30rpx;
		color: #F00617;
		font-size: 32rpx;
		font-weight: 600;
	}
	.cancel-order{
		background-color: rgba(0,0,0,0);
		border: 2rpx solid #FF203B;
		color: #FF203B;
		box-sizing: border-box;
	}
</style>
